<template>
    <main class="main">
        <h3>{{ $dot(ordermsg.info.amount) }}{{ $t('language.informcao.money') }}</h3>
        <span>{{ $t('language.order.money') }}</span>
        <div class="success">
            <p>{{ $t('language.order.buysuccess') }}</p>
            <p>{{ $t('language.order.successText') }}</p>
        </div>
        <div class="pay">
            <span>{{ $t('language.order.paytype') }}: {{ ordermsg.info.payMode == 0 ? 'BRL' : 'USDT' }}</span>
            <div>
                <span>{{ $t('language.order.orderID') }}: {{ ordermsg.info.orderID }}</span>
                <i @click="copyToClipboard(ordermsg.info.orderID)">{{ $t('language.order.copytext') }}</i>
            </div>
        </div>
        <p>{{ $t('language.order.question') }}<span @click="$openPage('/kefu')">{{ $t('language.order.kefu') }}</span>{{
            $t('language.order.solve')
        }}</p>
        <div class="btns">
            <el-button class="left" @click="store.$patch({ rechangeType: 0 })">{{
            $t("language.order.continue")
        }}</el-button>
            <el-button class="right" @click="store.$patch({ isRecord: 1 })">{{
            $t("language.order.lookrecord")
                }}</el-button>
        </div>
    </main>
</template>
<script setup lang="ts">
import { computed, reactive } from "vue";
// import { copyToClipboard } from "../../utils/common";
const store = useStore()
let paymentinfo: any = computed(() => store.orderinfo)
let userinfo: any = computed(() => store.userinfo)
import { useI18n } from "vue-i18n";
const { t } = useI18n();
// 数据初始化
let ordermsg = reactive({
    info: {
        amount: "",
        orderID: "",
        payMode: 0
    }
})
// 复制
let copyToClipboard = (text: string | number | null | undefined) => {
  let tmpTextField: any = document.createElement("textarea");
  tmpTextField.textContent = text;
  tmpTextField.setAttribute("style", "position:absolute; right:200%;");
  document.body.appendChild(tmpTextField);
  tmpTextField.select();
  tmpTextField.setSelectionRange(0, 99999); /*For mobile devices*/
  document.execCommand("copy");
  ElMessage({
    message: t("language.commontips.copysuccess"),
    type: "success",
    duration: 1000,
  });
}
let initData = () => {
    useHttpPOST("/Payment/v1.0/User/Recharge/Detail", { orderId: paymentinfo.value.orderNo }).then(({ data }: { data: any }) => {
        ordermsg.info = { ...data.value.data }
    })

}
initData()





// onMounted(async () => {
//   const canvas = await QRCode.toDataURL(text);
//   qrCodeSrc.value = canvas;
// });
</script>
<style scoped lang="scss">
.main {
    width: 100%;
    height: 100%;
    padding: 30px 15px 40px;
    @include flex(column, flex-start, center);

    h3 {
        font-size: 30px;
        color: #999;
    }

    >span {
        color: #b5bac8;
        font-size: 14px;
    }

    .success {
        width: 100%;
        padding: 20px 0;
        margin: 30px 0;

        p {
            font-size: 16px;
            color: #fff;
            text-align: center;
            margin-top: 6px;
        }
    }

    >p {
        font-size: 14px;
        color: #b5bac8;
        text-align: center;
        margin-top: 30px;

        span {
            color: #fff;
            font-size: 14px;
        }
    }

    .pay {
        width: 100%;

        span {
            color: #999;
            font-size: 14px;
        }

        div {
            margin-top: 5px;
            @include flex(row, space-between, center);

            span {
                font-size: 14px;
            }

            i {
                color: #999;
                font-size: 14px;
                font-style: normal;

            }
        }
    }

    .btns {
        @include flex(row, space-between, center);
        margin-top: 20px;
        width: 100%;
       

        .left,
        .right {
            width: 42%;
            height: 44px;
            font-size: 18px;
            border-radius: 10px;
        }

        .right {
            background-color: #0a906c;
            border: 1px solid #0a906c;
            color: #fff;
        }

        .left {
            background-color: #0a906c;
            color: #fff;
            border: 1px solid #0a906c;
        }

    }
}
</style>